<template>
  <div id="app">
    <div class="content">
      <div class="title">
        <el-divider content-position="left"><p class="divider-p">发表评论</p></el-divider>
      </div>
      <div id="refer" class="refer">
        <div>
          <i class="el-icon-circle-plus-outline emoji" @click="emoji()"></i>
        </div>
        <el-divider class="divider"></el-divider>
        <el-input 
          v-model="input" 
          class="input" 
          maxlength="1000" 
          show-word-limit 
          type="textarea"
          rows="10"
          resize="none">
        </el-input>
        <el-upload
        class="avatar-uploader"
        action="#"
        :http-request="httpRequest"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
      >
        <el-image
          v-if="this.imageUrl"
          :src="this.imageUrl"
          fit="cover"
        ></el-image>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      </div>
      <el-button type="primary" class="submit" @click="submit()" :disabled="!this.disabled"><span class="submit-span">{{ this.disabled ? '提交评论' : '请先登录'}}</span></el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "articledetail",
  data() {
    return {
      input: "",
      disabled: this.$cookies.isKey("CookieId"),
      formData: {},
      imageUrl: "",
      file: {}
    }
  },
  mounted() {
    this.formData = new FormData();
  },
  components: {},
  methods: {
    emoji() {
      this.$message.info("功能未完成")
    },

    // 提交，往空 formData 里面传数据
    submit() {
      if((this.input != "") || (this.file.size)){
        let f = new File([""], "filename")
        this.formData.append("username", this.$cookies.get("UserName"));
        this.formData.append("text", this.input);
        this.formData.append("id", this.$route.params.id);
        this.formData.append("image", this.file.size ? this.file : f);
  
        this.axios.post('http://www.liujn.top/bbs/api/reply/huitie', this.formData).then((res) => {
          console.log(res.data)
          if(res.data == "-1") {
            this.$message.error('提交失败')
          } else if (res.data == "0") {
            this.$message({
              message: '留言成功',
              type: "success",
              offset: 50
            }),
            this.$router.go(0)
          } else {
            this.$message.error('未知错误')
          }
        })
      } else {
        this.$message.error("请输入内容")
      }
    },

    // 提交文件之前的验证
    beforeAvatarUpload(file) {
      let fileName = new Date().getTime().toString()
      if(file.type == "image/jpeg") {
        fileName = fileName + ".jpg"
      } else if (file.type == "image/png") {
        fileName = fileName + ".png"
      } else if (file.type == "image/gif") {
        fileName = fileName + ".gif"
      } else {
        fileName = fileName + ".???"
      }
      const copyFile = new File([file], fileName, {type: file.type})
      const isJPG = (copyFile.type === "image/gif") || (copyFile.type === "image/jpeg") || (copyFile.type === "image/png");
      const isLt2M = copyFile.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 、GIF 或 PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      this.file = copyFile
      return isJPG && isLt2M;
    },

    // 上传的图片在本地预览
    httpRequest (data) {
      console.log(data.file)
      let rd = new FileReader()
      let file = data.file
      rd.readAsDataURL(file)
      rd.onloadend = (e) => {
        this.imageUrl = e.target.result
      }
    }
  },
};
</script>

<style scoped>
.content {
  width: 80%;
  background-color: #fff;
  margin: 0px auto 20px auto;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
}

.title {
  padding: 20px 0px 20px 0px;
}

#refer {
  border: 1px solid #DCDFE6;
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

div /deep/.el-textarea__inner {
  border: 1px solid #dcdfe600;
}

.emoji {
  font-size: 26px;
  color: #999;
  margin: 3px auto 3px 5px;
}

.emoji:hover {
  cursor: pointer
}

.divider {
  margin: 0px;
}

.divider-p {
  font-size: 20px;
  padding: 0px 10px 0px 10px;
  color: #666;
}

.submit {
  display: flex;
  margin: 10px auto 0px 5%;
  width: 100px;
  height: 40px;
}

.submit-span {
  color: #fff;
  line-height: 40px;
  margin-left: 20px;
  font-weight: bold;
}

* {
  margin: 0px;
  padding: 0px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.input {
  border-bottom: 1px solid #d9d9d9;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
}

.el-image {
  width: 150px;
}

.refer {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 768px) {
  .content {
    width: 94%;
    background-color: #fff;
    margin: 0px auto 20px auto;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
  }
}
</style>